@extends('admin.common.main')
@section('css')
    {{--webuploader样式--}}
    <link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css" />

@endsection
@section('cnt')
    <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页
        <span class="c-gray en">&gt;</span> 文章管理 <span class="c-gray en">&gt;</span> 添加文章 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>

    <article class="page-container">
        @include('admin.common.validate')
        {{--同步上传--}}
{{--        <form action="{{route('admin.article.store')}}" method="post" enctype="multipart/form-data" class="form form-horizontal"  @submit.prevent="dopost">--}}
        {{--异步上传    --}}
        <form action="{{route('admin.article.store')}}" method="post"  class="form form-horizontal"  @submit.prevent="dopost">

            @csrf
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>文章标题：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    {{--v-model.lazy 延时绑定--}}
                    <input type="text" class="input-text" placeholder=""  name="title">
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>文章摘要：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    {{--v-model.lazy 延时绑定--}}
                    <input type="text" class="input-text" placeholder=""  name="desn">
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>文章封面：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    {{--表单提交的封面地址--}}
                    <input type="hidden" class="input-text" placeholder=""  name="pic" id="pic" value="{{config('up.pic')}}">
                    <div id="picker">上传文章封面</div>
                </div>
                <div class="formControls col-xs-4 col-sm-4">
                    <img src="" id="img" width="100">
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>文章内容：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    {{--v-model.lazy 延时绑定--}}
                   <textarea name="body" id="body"></textarea>
                </div>
            </div>


            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="提交">
                </div>
            </div>
        </form>
    </article>
    @endsection
@section('js')
    {{--webuploader js--}}
    <script src="/webuploader/webuploader.js"></script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('body',{
            // initialFrameHeight:200,  //设置高度
        });
        // 初始化Web Uploader

        var uploader = WebUploader.create({
            //选完文件自动上传
            auto:true,
            // swf文件路径
            swf: '/webuploader/js/Uploader.swf',

            // 文件接收服务端。
            server: '{{route('admin.article.upfile')}}',
            //文件参数
            formData:{
            _token: '{{csrf_token()}}'
            },
            //文件上传表单名称
            fileVal:'file',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick:{
                id:'#picker',
                //是否开启选择多文件能力
                multiple:false,
            } ,

            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false
        });
        // 文件上传成功，给item添加成功class, 用样式标记上传成功。回调方法
        uploader.on( 'uploadSuccess', function( file ,ret) {
            let src = ret.url;

            //给表单添加value值
            $("#pic").val(src);
            //给图片添加
            $('#img').attr('src',src);
        });
    </script>

    @endsection